<template>
  <div class="input-area">
    <div class="input-wrapper">
      <div class="input-container">
        <div class="input-field">
          <div class="input-icon">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                fill="currentColor" />
            </svg>
          </div>
          <textarea :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"
            @keydown.enter.prevent="$emit('send-message')" placeholder="输入您的问题，按 Enter 发送..." :disabled="isStreaming"
            rows="1" class="message-input" ref="textareaRef"></textarea>
        </div>
        <button @click="$emit('send-message')" :disabled="isStreaming" class="send-btn"
          :class="{ loading: isStreaming }">
          <span v-if="isStreaming" class="loading-spinner"></span>
          <span v-else>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" fill="currentColor" />
            </svg>
            发送
          </span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  isStreaming: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'send-message'])

const textareaRef = ref(null)

// 自动调整文本框高度
const adjustTextareaHeight = () => {
  if (textareaRef.value) {
    textareaRef.value.style.height = 'auto'
    textareaRef.value.style.height = Math.min(textareaRef.value.scrollHeight, 120) + 'px'
  }
}

watch(() => props.modelValue, () => {
  nextTick(adjustTextareaHeight)
})
</script>


<style scoped>
@import './index.css';
</style>
